<!--
 * Date: 2018年01月02日 09:32:33
 * LastEditors: lvyou
 * LastEditTime: 2019年12月02日 15:21:40
 * FilePath: \youlinweb-master\src\pages\topic\topicdetail\topicdetail.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
  <div style="margin-bottom: 1.02rem;" id="allbody">
    <ylheader :leftsvg="true" :title="'话题详情'" :isrightcollectsvgshow="true" :rightcollectsvg="rightcollectsvgicon" @collectevent="iscollectevent"></ylheader>
    <deletepopup :poptext="poptext" @candelete="goexchange" @cancledelete="cancleexchange" :isshowdeletepopup="showdelete" @deleteshow="deleteshow"></deletepopup>
    <div class="loadmore-container" ref="topicDetailWrapper">
      <div class="loadmore-ul">
        <div class="shuoshuo-new" v-if="istopicoffline==true">
          <span class="yl-2kong nosvg">
            <span class="path1">
              <span class="path2">
                <span class="path3">
                  <span class="path4">
                    <span class="path5">
                      <span class="path6">
                        <span class="path7">
                          <span class="path8">
                            <span class="path9"></span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
          </span>
          <span class="no-text">该话题已下线！</span>
        </div>
        <div v-else>
          <div v-for="item in topicarray" :key="item.topicId">
            <hottopicdetail id="topicdetailtopic" :topicimg="item.topicPicture" :abbreviations="item.abbreviations" :followNumber="item.followNumber" :title="item.title" :topictype="1">
            </hottopicdetail>
          </div>
          <div>
            <div id="topicDetailHtml" v-on:click="clickImage($event)" v-html="html" style="font-size: 0.28rem;color:#3a3a3a;background-color: white;
                                      padding: 0.25rem 0.52rem;word-wrap:break-word;word-break:break-all;line-height:0.52rem">
            </div>
            <div class="activity_rule_fa" v-if="hasRule=='1'">
              <span>{{topicarray[0].ruleTitle}}：</span>
              <router-link :to="{path:'/activityrule',query:{tag:0,topicId:topicId}}">
                <span class="activity_click"> 点击查看</span>
              </router-link>
            </div>
          </div>

          <!-- 投票-->
          <div class="vote-style" v-if="havevote">
            <ylVote :youisvote="youisvote" :voteStatus="voteStatus" :radiotitle="radiotitle" :isRadio="isRadio" @changeProps="isshowvotepop" :allvotes="allvotes" :peoplenum="peoplenum"
              :voteContent="voteContent" :isVote="isVote" :restRepeat="restRepeat"></ylVote>
            <mycheckboxvote :youisvote="youisvote" :voteStatus="voteStatus" :checkboxtitle="checkboxtitle" :allvotes="allvotes" :isRadio="isRadio" @record="recordchecked"
              @submitcheckbox="isshowvotepop" :peoplenum="peoplenum" :voteContent="voteContent" :isVote="isVote" :restRepeat="restRepeat"></mycheckboxvote>
          </div>

          <!--猜你喜欢-->
          <div class="all-hot-title" v-if="hottopiclist.length>0">猜你喜欢</div>
          <div class="indextopicWrap" ref="topicrelatedWrap" v-if="hottopiclist.length>0">
            <ul class="indextopicWrap_u" :style="{width:250*(hottopiclist.length)+'rem'}">
              <li v-for="(items,index) in hottopiclist" :key="index">
                <indexscrolltopic @click.native="totopicdet(items)" :topicimg="items.topicPicture" :abbreviations="items.abbreviations" :followNumber="items.followNumber" :title="items.topicTitle"
                  :topictype="items.isShow"></indexscrolltopic>
              </li>
            </ul>
          </div>

          <div class="discuss" v-if="commentlist&&commentlist.length>0">
            <div class="discuss-title">
              <div>讨论(</div>
              <div class="discuss-title-num">{{totalCount}}</div>
              <div>)</div>
            </div>
            <div class="time-hot-nav" style="width:100%;flex:1" ref="baseRange">
              <mt-navbar :class="'topicdetail-navbar'" v-model="selected" style="height: 0.9rem;line-height:0.9rem">
                <mt-tab-item @click.native="basetime($event)" id="1">按时间</mt-tab-item>
                <mt-tab-item @click.native="basefloor($event)" id="3">按楼层</mt-tab-item>
                <mt-tab-item @click.native="basehot($event)" id="2">按热度</mt-tab-item>
              </mt-navbar>
            </div>
          </div>

          <mt-tab-container v-model="selected">
            <div v-if="selected==myid">
              <div v-for="(item,index) in commentlist" style="margin-bottom: 0.2rem;background-color: white" :key="index">
                <div class="topic_discuss_top" v-if="item.isTop=='1'">
                  <span class="yl-top" style="padding-top:0.05rem"></span>
                  <span class="top_red">置顶</span>
                </div>
                <hotheadertopic @topiccommentdetail="totopiccomdet" :commentindex="index" :nickname="item.nickName" :avatarimg="item.headImg" :topictime="item.time" :type="0" :floor="item.floor"
                  :userType="item.userType" :isTalent="item.isTalent" :pendantType="item.pendantType" :pendantPicUrl="item.pendantPicUrl"></hotheadertopic>
                <!--拼团展示-->
                <groupitem :commenttext="item.content" :pic="item.picUrls[0].src" v-if="item.content&&item.content.indexOf('://?')>-1"></groupitem>
                <!--普通话题展示-->
                <commentbody @showImg="popupImg" :commentindex="index" @replycomment="totopiccomdet" :commenttype="null" :commenttext="item.content" :piclength="item.picUrls.length"
                  :picarray="item.picUrls" :isdisplacetype="3" :lanxicontent="item.lanxicontent" :replyList="item.commentList" :topiccommentnum="item.commentCount" @commentsvgg="clickcomment" v-else>
                </commentbody>
                <thubmUp :topiccommentnum="item.commentCount" :thumbupnum="item.likesNumber" :isup="item.isGood" :commentindex="index" @thumbup="isthumbup" @commentsvgg="clickpublishcomment">
                </thubmUp>
              </div>
            </div>
          </mt-tab-container>
        </div>
      </div>
    </div>

    <div class="topic-detail-bottom" style="position: fixed;bottom: 0;width: 100%" v-if="topicarray!=''">
      <div v-if="activeId||paperObj.havePaper==1" style="display:flex;background:linear-gradient(to right, #fd996d, #ff5c5c);height:1rem;">
        <div @click="joincomment" class="join-bottom" :style="{'width':(showLimit=='1'&&(isjoin!='0'||(activityLimit!='-1'&&isjoin==0&&joinedNum>=activityLimit)))?'3.1rem':'50%'}">
          <span class="yl-2ping"></span>
          <span>参与讨论</span>
        </div>
        <div @click="isshowactivitypop" class="baoming-bottom " v-bind:style="{background:canjoincolor,'font-size':'0.3rem'}">
          <span v-if="showLimit=='0'||paperObj.havePaper==1" class="yl-2baom"></span>
          <span v-if="showLimit=='0'||paperObj.havePaper==1">{{signuptext}}</span>
          <span v-if="showLimit=='1'" class="yl-2baom"></span>
          <span v-if="showLimit=='1'">{{signuptext}}({{joinedNum}}/{{activityLimit}})</span>
        </div>
      </div>
      <div @click="joincomment" v-else class="big-bottom">
        <span class="yl-2ping" style="font-size:0.4rem;"></span>
        <span>参与讨论</span>
      </div>
    </div>
    <transition name="fade">
      <div class="modal-img" v-if="popupVisible" @click="popupVisible=false">
        <mt-swipe :auto="100000" style="width: 100%;height: 100vh;position:relative;" :continuous="false" :defaultIndex="swiperIndex" :showIndicators="false">
          <mt-swipe-item v-for="(item,index) in popImg" :key="index" style="height:100vh">
            <img v-lazy="item" class="swiper-img" />
          </mt-swipe-item>
        </mt-swipe>
      </div>
    </transition>
  </div>
</template>
<script>
import { Previewer, TransferDom } from "vux";
import { Indicator } from 'mint-ui';
import ylheader from "src/components/yl-header.vue";
import hottopicdetail from "src/components/topic/hot-topic-detail.vue";
import indexscrolltopic from "src/components/index/indextopicnorecommed.vue";
import { Navbar, TabItem } from "mint-ui";
import hotheadertopic from "src/components/allhot-header-indextopic.vue";
import commentbody from "src/components/comment-detail-body.vue";
import thubmUp from "src/components/thumb-up.vue";
import api from "src/api/index";
import ylVote from "src/components/yl-vote";
import { mapState, mapMutations } from "vuex";
import mycheckboxvote from "src/components/mycheckbox-vote.vue";
import BScroll from "better-scroll";
import deletepopup from "src/components/deletepopup.vue";
import groupitem from "src/components/topicdetail/groupitem.vue";
export default {
  name: "topicdetail",
  directives: {
    TransferDom
  },
  data () {
    return {
      swiperIndex: 0,
      popupVisible: false,
      popImg: '',
      totalCount: "",//总讨论数
      selected: "",
      topicarray: [],
      istopicoffline: false,
      commentlist: [],
      voteContent: [],
      isVote: "",
      activeId: "",
      canjoincolor: "",
      isjoin: "",
      peoplenum: 0,
      isRadio: 0,
      paramslist: [],
      havevote: "",
      allvotes: 0,
      topicId: this.$route.query.topicId,
      radiotitle: "",
      checkboxtitle: "",
      voteStatus: "",
      youisvote: "",
      is_r: false,
      myid: "1",
      restRepeat: 0,
      topicDetailImgs: [],
      html: "",
      doubleclick: false,//防止双击
      activityLimit: "",//报名限制人数
      joinedNum: "",//已报名人数
      showLimit: "",//是否显示报名人数，0否1是
      signuptext: "报名",//报名显示字体
      rightcollectsvgicon: 0,//0未收藏，1已收藏
      hottopiclist: [],
      hasRule: 0,//活动规则 0否1是
      currPage: 1,
      showdelete: false,
      changePropsdata: "",
      poptext: "",
      costCoin: { activityCoin: null, voteCoin: null },
      activityInfo: [],//已报名信息
      paperObj: { havePaper: 0, startPaper: 0, }
    };
  },
  computed: {
    ...mapState(["topicdetail", "usercoin"])
  },
  components: {
    ylheader,
    hottopicdetail,
    Navbar,
    TabItem,
    hotheadertopic,
    thubmUp,
    ylVote,
    mycheckboxvote,
    Previewer,
    commentbody,
    indexscrolltopic,
    deletepopup,
    groupitem,
  },
  watch: {
    selected (val, oldval) {
      this.changetopicdetail(val);
      this.myid = val;
    }
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.$router.go(0)
    location.reload()
  },
  mounted () {
    // this.changeTitle();
    localStorage.removeItem("indexTopicId");
    Indicator.open('加载中...');
    this.selected = this.topicdetail;
    this.activeId = this.$route.query.activeId;
    this.myid = this.topicdetail;
    this.getSayDetail()
      .then(data => {
        this.getrelatedtopiclist();
        return this.topicdetailTimeOrHot();
      })
      .then(res => {
        if (this.hottopiclist.length == 0) {
          return;
        }
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.topicrelatedWrap, {
            scrollX: true,
            tap: "set_cart,changeMastDisplay"
          });
        } else {
          this.scroll.refresh();
        }
      })
      .then(data => {
        return this.topiclookactive();
      })
      .then(data => {
        return this.initScroll();
      })
      .then(data => {
        this.$nextTick(() => {
          setTimeout(() => {
            this.myscroll.refresh();
          }, 1000);
        });
        let loadmore = document.getElementsByClassName("loadmore-ul");
        if ("comment2detail" == localStorage.turnCount) {
          if (loadmore.length > 0) {
            setTimeout(() => {
              this.myscroll.refresh();
              loadmore[0].style.transform = localStorage.turnBackTopicDetail;
            }, 0);
          }
          localStorage.turnCount = "";
          Indicator.close();
          $("a").removeAttr("target");
          this.getALoading()
        }
        //如果是从卡片跳转过来
        if (window.location.search.indexOf("jumpType") != -1) {
          localStorage.removeItem("jumpType");
          const hottopicclick = {
            id: this.$route.query.topicId,
            type: 7
          };
          const indextopicclick = {
            id: this.$route.query.topicId,
            type: 1
          };
          this.$util.saveclicknum(hottopicclick);
          this.$util.saveclicknum(indextopicclick);
          //用户在线时长
          this.getUserOnline();
          var timer = setInterval(() => {
            this.getUserOnline();
          }, 60000);
        }
      }).then(res => {
        this.survey();
      });
  },
  methods: {
    ...mapMutations(["changetopicdetail"]),
    //显示图片
    popupImg (data, index) {
      console.log(data, index)
      this.swiperIndex = index
      if (typeof data == 'string') {
        data = data.split(',')
      }
      //console.log(data,index)
      this.popImg = data;
      this.popupVisible = true;
      // console.log(this.swiperOne)
      // this.swiperOne.slideTo(index)
    },
    goexchange () {
      this.showdelete = false;
      if (this.poptext.indexOf("投票") > -1 && this.isRadio == 0) {
        this.submitcheckbox();
      } else if (this.poptext.indexOf("投票") > -1 && this.isRadio == 1) {
        this.changeProps(this.changePropsdata);
      } else {
        this.joinactive();
      }
    },
    cancleexchange () {
      this.showdelete = false;
    },
    deleteshow (data) {
      this.showdelete = data;
    },
    survey () {//家庭水电煤安全情况调查
      $("a").removeAttr("target");
      $("a").each(function (index, i) {
        if (i.innerHTML == "家庭水电煤安全情况调查") {
          i.href = i.href + "?park=" + localStorage.getItem("park") + "&nickName=" + localStorage.getItem("nickName") + "&mobile=" + localStorage.getItem("moblie")
            + "&name=" + localStorage.getItem("name") + "&city=" + localStorage.getItem("city") + "&province=" + localStorage.getItem("province") + "&openid=" + localStorage.getItem("openid")
        }
      })
      var that = this
      $(".goodsItem").each(function (index, i) {
        $(i).bind("click", function () {
          that.goGoodsDetail($(i).attr("data-id"))
        })
      })
      this.getALoading()
    },
    getALoading () {
      $("a").each(function (index, i) {
        if ($(i)[0].className.indexOf("mint-tab-item") < 0) {//按楼层，按热度，按时间点击不跳转
          $(i).bind("click", function () {
            if ($(i)[0].href.indexOf("?") > -1) {
              $(i)[0].href = $(i)[0].href + "&token=" + localStorage.getItem("token")
            } else {
              $(i)[0].href = $(i)[0].href + "?token=" + localStorage.getItem("token")
            }

            Indicator.open("加载中....")
            setTimeout(() => {
              Indicator.close()
            }, 500)

          })
        }
      })
    },
    clickImage (event) {
      this.topicDetailImgs = [];
      var imageIndex;
      var that = this;
      if (event.target.nodeName === "IMG") {
        $("#topicDetailHtml")
          .find("img")
          .each(function (index, i) {
            if (i == event.target) {
              imageIndex = index;
            };
            that.topicDetailImgs.push(i.src);
          });
        window.location.href = "image://?url=" + that.topicDetailImgs + "&currentIndex=" + imageIndex;
      } else if (event.target.nodeName === "A") {
        window.location.href = event.target.href
      }
    },
    //查询评论接口
    topicdetailTimeOrHot () {
      let p = new Promise((resolve, reject) => {
        const data = {
          id: this.topicId,
          type: this.selected - 1,
          page: 1,
          limit: 10,
        };
        data.lastOne = data.page == '1' ? '' : this.commentlist[this.commentlist.length - 1].id;
        if ("comment2detail" == localStorage.turnCount) {
          Indicator.close();
          let topicDetailObj = JSON.parse(localStorage.topicDetailStorage);
          this.commentlist = topicDetailObj.commentlist;
          this.currPage = topicDetailObj.currPage;
          this.totalPage = topicDetailObj.totalPage;
          this.totalCount = topicDetailObj.totalCount;
          resolve(true);
        } else {
          api.QuerytopicdetailTimeOrHot(data).then(res => {
            if (res.success) {
              this.commentlist = res.data.list;
              this.totalCount = res.data.totalCount;
              this.picAutoOrient(0);
              this.$util.getlanxidata(this.commentlist);
              this.$util.getListUrl(this.commentlist);//url加a标签
              // this.currPage = res.data.currPage;
              this.totalPage = res.data.totalPage;
              let topicDetailObj = JSON.stringify({
                commentlist: this.commentlist,
                currPage: this.currPage,
                totalPage: this.totalPage,
                totalCount: this.totalCount
              });
              localStorage.topicDetailStorage = topicDetailObj;
            }
            resolve("获取评论信息...");
          });
        }
      });
      return p;
    },
    //查询话题查看活跃信息
    topiclookactive () {
      let p = new Promise((resolve, reject) => {
        const activeparams = {
          id: this.activeId
        };
        if (!!this.activeId) {
          api.Querytopiclookactive(activeparams).then(res => {
            if (res.success) {
              this.isjoin = res.data.activity.status;
              this.joinedNum = res.data.activity.joinedNum;
              this.activityLimit = res.data.activity.activityLimit;
              this.showLimit = res.data.activity.showLimit;
              this.activityInfo = res.info;
              if (this.isjoin == "0" && this.joinedNum < this.activityLimit) {
                this.canjoincolor = "#FB9B6F";
                this.signuptext = "报名";
              } else if (this.isjoin == "0" && this.activityLimit != "-1" && parseInt(this.joinedNum) >= parseInt(this.activityLimit)) {
                this.canjoincolor = "#c2c2c2";
                this.signuptext = "报名人数已满";
              } else if (this.isjoin == "1") {
                this.canjoincolor = "#c2c2c2";
                this.signuptext = "报名未开始";
              } else if (this.isjoin == "2") {
                this.canjoincolor = "#c2c2c2";
                this.signuptext = "报名已结束";
              }
            }
            resolve("获取活跃数据...");
          });
        } else {
          resolve("未获取...");
        }
      });
      return p;
    },
    //初始化scroll
    initScroll () {
      let p = new Promise((resolve, reject) => {
        let topicDetailWrapper = this.$refs.topicDetailWrapper;
        localStorage.tempPageHeight = document.getElementsByClassName(
          "loadmore-ul"
        )[0].scrollHeight;
        let _this = this;
        this.$nextTick(() => {
          _this.myscroll = new iScroll(topicDetailWrapper, {
            preventDefault: false,
            preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ },
            onScrollMove: function () {
              if (
                this.y <= this.wrapperH - this.scroller.clientHeight - 50 &&
                _this.is_r == false
              ) {
                _this.is_r = true;
                if (_this.currPage < _this.totalPage) {
                  _this.currPage++;
                  if ("1" == _this.myid) {
                    _this.basetime();
                  } else if ("2" == _this.myid) {
                    _this.basehot();
                  } else {
                    _this.basefloor();
                  }
                }
              }
            },
            onScrollEnd: function () { },
            onScrollStart: function () {
              if (
                localStorage.tempPageHeight !=
                document.getElementsByClassName("loadmore-ul")[0].scrollHeight
              ) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-ul"
                )[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll");
        });
      });
      return p;
    },
    //多选
    recordchecked (data) {
      this.voteContent[data.ylindex].checked = data.checked;
    },
    checkBoxContent () {
      if (this.costCoin.voteCoin != null && this.costCoin.voteCoin > this.usercoin) {
        this.$toast("绿币不足");
        return false;
      }
      this.paramslist = [];
      _each(this.voteContent, (v, i) => {
        if (v.checked == true) {
          this.paramslist.push({
            voteContentID: v.voteContent.id,
            voteId: v.voteContent.voteId,
            userHead: localStorage.getItem("headImg"),
            userName: localStorage.getItem("name")
          });
        }
      });

      if (this.paramslist.length == 0) {
        this.$toast("请投票");
        return false;
      }

      return true;
    },
    submitcheckbox () {
      if (this.doubleclick) {
        return;
      }
      this.doubleclick = true;
      const params = {
        json: JSON.stringify(this.paramslist),
        voteId: this.voteContent[0].voteContent.voteId
      };

      api.Savevoteresult(params).then(res => {
        this.doubleclick = false;
        if (res.success) {
          this.$toast("投票成功")
          this.$util.saveFootPrint({ actType: 21, typeValue: this.voteContent[0].voteContent.voteId });//用户轨迹
          this.isVote = true;
          this.getSayDetail(this.topicId);
        } else {
          this.$toast(res.msg);
        }
      });
    },
    isshowvotepop (data) {
      if (this.isRadio == 1) {//单选
        if (data == 1000) {
          this.$toast("请投票");
          return;
        } else if (this.costCoin.voteCoin != null && this.costCoin.voteCoin > this.usercoin) {
          this.$toast("绿币不足");
          return;
        }
        if (this.costCoin.voteCoin != null && this.costCoin.voteCoin != 0) {
          this.showdelete = true;
          this.poptext = "本次投票要消耗" + this.costCoin.voteCoin + "绿币，确定要投票吗？";
          this.changePropsdata = data;
        } else {
          this.changeProps(data);
        }
      } else if (this.isRadio == 0) {//多选
        if (this.checkBoxContent()) {
          if (this.costCoin.voteCoin != null && this.costCoin.voteCoin != 0) {
            this.showdelete = true;
            this.poptext = "本次投票要消耗" + this.costCoin.voteCoin + "绿币，确定要投票吗？";
          } else {
            this.submitcheckbox();
          }
        }
      }
    },
    isshowactivitypop () {
      if (this.paperObj.havePaper == 1 && this.paperObj.startPaper == 1) {
        this.$router.push({ path: '/paper', query: { id: this.topicarray[0].paperId } });
        return
      }


      if (this.isjoin == 1) {
        this.$toast("活动未开始哟");
        return;
      } else if (this.isjoin == 2) {
        this.$toast("活动已结束");
        return;
      } else {
        if (this.costCoin.activityCoin != 0 && this.costCoin.activityCoin != null && this.activityInfo.length == 0) {//已报名不弹窗
          this.showdelete = true;
          this.poptext = "本次活动要消耗" + this.costCoin.activityCoin + "绿币，确定要报名吗？";
        } else {
          this.joinactive();
        }
      }
    },
    //单选
    changeProps (data) {
      if (this.doubleclick) {
        return;
      }
      this.doubleclick = true;
      const list = [
        {
          voteContentID: this.voteContent[data].voteContent.id,
          voteId: this.voteContent[data].voteContent.voteId,
          userHead: localStorage.getItem("headImg"),
          userName: localStorage.getItem("name")
        }
      ];
      const params = {
        json: JSON.stringify(list),
        voteId: this.voteContent[data].voteContent.voteId
      };
      api.Savevoteresult(params).then(res => {
        this.doubleclick = false;
        if (res.success) {
          this.$toast("投票成功")
          this.$util.saveFootPrint({ actType: 21, typeValue: this.voteContent[data].voteContent.voteId });//用户轨迹
          if (res.drawId == null) {
            this.isVote = true;
            this.getSayDetail(this.topicId);
          } else {
            this.$router.push({
              path: "/roundrotate",
              query: { drawId: res.drawId }
            });
          }
        } else {
          this.$toast(res.msg);
        }
      });
    },
    isthumbup (data) {
      const param = {
        type: 0,
        typeId: this.commentlist[data.commentindex].id,
        recMsgId: this.commentlist[data.commentindex].userId,
        topicId: this.$route.query.topicId
      };
      if (this.commentlist[data.commentindex].isGood == 0) {
        api.Querytopicsavegood(param).then(res => {
          if (res.success) {
            this.$util.saveFootPrint({ actType: 7, typeValue: this.commentlist[data.commentindex].id });//用户轨迹
            if (res.isGood == 1) {
              this.commentlist[data.commentindex].isGood = 1;
              this.commentlist[data.commentindex].likesNumber = res.data;
              //更新点赞缓存
              let topicDetailObj = JSON.stringify({
                commentlist: this.commentlist,
                currPage: this.currPage,
                totalPage: this.totalPage,
                totalCount: this.totalCount
              });
              localStorage.topicDetailStorage = topicDetailObj;
            }
          }
        });
      } else if (this.commentlist[data.commentindex].isGood == 1) {
        api.QuerytopicCanaleGood(param).then(res => {
          if (res.success) {
            if (res.isGood == 0) {
              this.commentlist[data.commentindex].isGood = 0;
              this.commentlist[data.commentindex].likesNumber = res.data;
              let topicDetailObj = JSON.stringify({
                commentlist: this.commentlist,
                currPage: this.currPage,
                totalPage: this.totalPage,
                totalCount: this.totalCount
              });
              localStorage.topicDetailStorage = topicDetailObj;
            }
          }
        });
      }
    },
    basetime (event) {
      if (!!event) {
        this.is_r = false;
        this.currPage = 1;
        this.myscroll.refresh();
      }
      this.myid = "1";
      this.selected = "1";
      const data = {
        id: this.$route.query.topicId,
        type: 0
      };
      data.page = this.currPage;
      if (this.commentlist.length > 0) {
        data.lastOne = data.page == '1' ? '' : this.commentlist[this.commentlist.length - 1].id;
      }
      api.QuerytopicdetailTimeOrHot(data).then(res => {
        if (res.success) {
          Indicator.close();
          this.commentlist = this.is_r
            ? [...this.commentlist, ...res.data.list]
            : res.data.list;
          this.picAutoOrient(data.page - 1);
          this.$util.getlanxidata(this.commentlist);
          // this.currPage = res.data.currPage;
          this.totalPage = res.data.totalPage;
          if (this.currPage < this.totalPage) {
            this.is_r = false;
          }
          this.$nextTick(() => {
            this.myscroll.refresh();
          });
          let topicDetailObj = JSON.stringify({
            commentlist: this.commentlist,
            currPage: this.currPage,
            totalPage: this.totalPage,
            totalCount: this.totalCount
          });
          localStorage.topicDetailStorage = topicDetailObj;
        }
      });
    },
    basehot (event) {
      if (!!event) {
        this.is_r = false;
        this.currPage = 1;
        this.myscroll.refresh();
      }
      this.myid = "2";
      this.selected = "2";
      const data = {
        id: this.$route.query.topicId,
        type: 1
      };
      data.page = this.currPage;
      data.lastOne = data.page == '1' ? '' : this.commentlist[this.commentlist.length - 1].id;
      api.QuerytopicdetailTimeOrHot(data).then(res => {
        if (res.success) {
          Indicator.close();
          this.commentlist = this.is_r
            ? [...this.commentlist, ...res.data.list]
            : res.data.list;
          this.picAutoOrient(data.page - 1);
          this.$util.getlanxidata(this.commentlist);
          // this.currPage = res.data.currPage;
          this.totalPage = res.data.totalPage;
          if (this.currPage < this.totalPage) {
            this.is_r = false;
          }
          this.$nextTick(() => {
            this.myscroll.refresh();
          });
          let topicDetailObj = JSON.stringify({
            commentlist: this.commentlist,
            currPage: this.currPage,
            totalPage: this.totalPage,
            totalCount: this.totalCount
          });
          localStorage.topicDetailStorage = topicDetailObj;
        }
      });
    },
    basefloor (event) {
      if (!!event) {
        this.is_r = false;
        this.currPage = 1;
        this.myscroll.refresh();
      }
      this.myid = "3";
      this.selected = "3";
      const data = {
        id: this.$route.query.topicId,
        type: 2
      };
      data.page = this.currPage;
      data.lastOne = data.page == '1' ? '' : this.commentlist[this.commentlist.length - 1].id;
      api.QuerytopicdetailTimeOrHot(data).then(res => {
        if (res.success) {
          Indicator.close();
          this.commentlist = this.is_r
            ? [...this.commentlist, ...res.data.list]
            : res.data.list;
          this.picAutoOrient(data.page - 1);
          this.$util.getlanxidata(this.commentlist);
          // this.currPage = res.data.currPage;
          this.totalPage = res.data.totalPage;
          if (this.currPage + 1 < this.totalPage) {
            this.is_r = false;
          }
          this.$nextTick(() => {
            this.myscroll.refresh();
          });
          let topicDetailObj = JSON.stringify({
            commentlist: this.commentlist,
            currPage: this.currPage,
            totalPage: this.totalPage,
            totalCount: this.totalCount
          });
          localStorage.topicDetailStorage = topicDetailObj;
        }
      });
    },
    totopiccomdet (data) {
      localStorage.turnCount = "comment2detail";
      this.getTransformState();
      this.$router.push({
        path: "/commentsdetail",
        query: {
          type: 0,
          commentId: this.commentlist[data.commentindex].id,
          topicIndex: data.commentindex,
          topicId: this.$route.query.topicId
        }
      });
    },
    clickcomment (data) {
      localStorage.turnCount = "comment2detail";
      this.getTransformState();
      this.$router.push({
        path: "/commentsdetail",
        query: {
          type: 0,
          commentId: this.commentlist[data.commentindex].id,
          topicIndex: data.commentindex,
          topicId: this.$route.query.topicId
        }
      });
    },
    clickpublishcomment (data) {
      localStorage.turnCount = "comment2detail";
      this.getTransformState();
      this.$router.push({
        path: "/publishcomments",
        query: {
          title: "发评论",
          type: "1",
          topicId: this.commentlist[data.commentindex].topicId,
          parentId: this.commentlist[data.commentindex].id,
          peplyId: this.commentlist[data.commentindex].userId,
          parentType: "",
          topicIndex: data.commentindex,
          commentId: this.commentlist[data.commentindex].id,
        }
      });
    },
    joincomment () {
      this.$router.push({
        path: "/publishcomments",
        query: { title: "添加讨论", type: 0, topicId: this.$route.query.topicId }
      });
    },
    joinactive () {
      if (this.isjoin == 0) {
        api.QueryrestQuota({ activityId: this.activeId }).then(res => {
          if (res.success) {
            this.$util.saveFootPrint({ actType: 22, typeValue: this.activeId });//用户轨迹
            if (res.couldJoin <= 0) {
              this.$toast("报名人数已满");
            } else {
              this.$router.push({
                path: "/newenrollment",
                query: { activeId: this.activeId, topicId: this.$route.query.topicId }
              });
            }
          }
        })
      }
    },
    getSayDetail () {
      let p = new Promise((resolve, reject) => {
        let topicId = this.topicId;
        this.allvotes = 0;
        if (typeof this.topicId == "undefined") {
          topicId = this.$route.query.topicId;
        }
        api.Querytopicdetail({ id: topicId }).then(res => {
          if (res.success) {
            Indicator.close();
            this.paperText(res.data);
            this.topicarray = res.data.topic;
            if (this.topicarray.length != 0) {
              this.costCoin.activityCoin = res.data.topic[0].activityCoin;
              if (res.data.vote) {
                this.costCoin.voteCoin = res.data.vote.vote.consumeCoin;
              }
              this.html = res.data.topic[0].topicContent;
              this.hasRule = res.data.topic[0].hasRule;
              this.activeId = res.data.topic[0].activityId;
              this.rightcollectsvgicon = res.data.topic[0].isCollected;
              this.istopicoffline = false
            } else {
              this.istopicoffline = true
            }
            //剩余投票次数
            this.restRepeat = res.data.restRepeat;
            if (res.data.vote) {
              this.voteContent = res.data.vote.voteContent;
              this.isRadio = res.data.vote.vote.isRadio;
              this.havevote = res.data.vote.voteContent[0].voteContent.voteId;
              this.peoplenum = res.data.vote.voteUserNum;
              this.radiotitle = res.data.vote.vote.voteTitle;
              this.checkboxtitle = res.data.vote.vote.voteTitle;
              this.voteStatus = res.data.vote.vote.voteStatus;
              _each(this.voteContent, (v, i) => {
                if (v.getvotes == null) {
                  v.getvotes = 0;
                }
                this.allvotes += v.getvotes;
              });
              var votesss = 0;
              for (var i = 0; i < this.voteContent.length - 1; i++) {
                this.voteContent[i].percent = (this.voteContent[i].getvotes /
                  this.allvotes *
                  100
                ).toFixed(2);
                votesss += this.voteContent[i].percent * 100;
              }

              this.voteContent[this.voteContent.length - 1].percent = ((10000 -
                votesss) /
                100
              ).toFixed(2);
              //最后一项投票为0
              if (this.voteContent[this.voteContent.length - 1].getvotes == 0) {
                this.voteContent[this.voteContent.length - 1].percent = 0;
              }
              //投票总数为0
              if (this.allvotes == 0) {
                for (var i = 0; i < this.voteContent.length; i++) {
                  this.voteContent[i].percent = 0;
                }
              }
            }
            if (res.data.isVote == "未投票") {
              this.isVote = false;
              if (this.voteStatus == 2) {
                this.isVote = true;
                this.youisvote = false;
              }
              if (this.voteStatus == 1) {
                this.isVote = false;
                this.youisvote = false;
              }
            } else if (res.data.isVote == "已投票") {
              this.isVote = true;
              this.youisvote = true;
            }
            resolve("获取话题详情信息...");
          }
        });
      });
      return p;
    },
    paperText (obj) {//问卷信息 havePaper 是否有调查问卷 0否1是。startPaper 当前时间是否能做问卷 0否1能
      this.$set(this.paperObj, 'havePaper', obj.havePaper)
      this.$set(this.paperObj, 'startPaper', obj.startPaper)
      if (obj.havePaper == 1) {
        this.signuptext = "问卷调查";
        if (obj.startPaper == 0) {
          this.canjoincolor = "#c2c2c2";
        } else {
          this.canjoincolor = "#35c9c1";
        }
      }
    },
    //获取跳转前的位置
    getTransformState () {
      let loadmore = document.getElementsByClassName("loadmore-ul");
      if (loadmore.length > 0) {
        localStorage.turnBackTopicDetail = loadmore[0].style.transform;
      }
    },
    //图片自动旋转参数
    picAutoOrient (data) {
      for (var m = data * 10; m < this.commentlist.length; m++) {
        for (var n = 0; n < this.commentlist[m].picUrls.length; n++) {
          this.commentlist[m].picUrls[n].src =
            this.commentlist[m].picUrls[n].src + "?imageMogr2/auto-orient";
        }
      }
    },
    getUserOnline () {
      api.getuseronline().then(res => { })
    },
    changeTitle () {
      // var WVJBIframe = document.createElement('iframe');
      // WVJBIframe.style.display = 'none';
      // WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
      // document.documentElement.appendChild(WVJBIframe);
      // if (window.WebViewJavascriptBridge) {
      //   // this.$toast('我要跳转了');
      //   window.WebViewJavascriptBridge.callHandler("_ app_setTitle", "幸福生活秀");
      // } else {
      //   // this.$toast('我要跳转了');
      // }
    },
    iscollectevent (data) {
      if (this.rightcollectsvgicon == 0) {
        const params = { type: 0, itemId: this.$route.query.topicId };
        api.addCollection(params).then(res => {
          if (res.success) {
            this.$util.saveFootPrint({ actType: 13, typeValue: this.$route.query.topicId });//用户轨迹
            this.rightcollectsvgicon = 1;
            this.$toast("收藏成功");
          }
        })
      } else if (this.rightcollectsvgicon == 1) {
        const params = { type: 0, itemId: this.$route.query.topicId };
        api.cancelCollection(params).then(res => {
          if (res.success) {
            this.rightcollectsvgicon = 0;
            this.$toast("取消收藏成功");
          }
        })
      }
    },
    getrelatedtopiclist () {
      let p = new Promise((resolve, reject) => {
        const params = { id: this.$route.query.topicId, };
        api.getrelatedtopiclist(params).then(res => {
          if (res.success) {
            this.hottopiclist = res.data.relatedTopic;
            resolve("猜你喜欢....");
          }
        })

      })
      return p;
    },
    totopicdet (items) {
      const addclick = {
        id: items.topicId,
        type: 1
      };
      this.$util.saveclicknum(addclick);
      const hottopicclick = {
        id: items.topicId,
        type: 10
      };
      this.$util.saveclicknum(hottopicclick);
      this.getTransformState();
      this.topicId = items.id;
      this.$router.push({
        path: "/topicdetail",
        query: { topicId: items.id, token: localStorage.getItem("token") }
      });
    },
    goGoodsDetail (goodsId) {
      const params = { goodsId: goodsId }
      api.goGoodsDetail(params).then(res => {
        if (res.code == 0) {
          window.location.href = res.data
        }
      })
    }
  },



};
</script>
<style lang="less" scoped>
.modal-img {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  img {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
  }
}
.mint-tab-item-label {
  .topicdetail-navbar {
    font-size: 0.26rem !important;
  }
}

#topicDetailHtml img {
  max-width: 100% !important;
}
#topicDetailHtml {
  .item-container {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 0.1rem;
    background: #f5f5f5;
    margin-bottom: 10px;
    img {
      width: 1.9rem;
      height: 1.9rem;
    }
    .item-button {
      position: absolute;
      bottom: 0.18rem;
      right: 0.3rem;
      color: #fff;
      background-color: #f94e5b;
      border-color: #f94e5b;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      padding: 0 0.15rem;
      height: 0.48rem;
      line-height: 0.51rem;
      font-size: 0.24rem;
      border-radius: 0.05rem;
    }
    .item-content {
      position: relative;
      width: 0;
      height: 100px;
      margin-left: 0.2rem;
      margin-right: 0.15rem;
      flex: 1;
      h1 {
        line-height: 1.5;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        margin: 0.15rem 0 0 0;
        color: #3a3a3a;
        font-size: 0.32rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      p {
        position: absolute;
        color: #f94e5b;
        bottom: 0.15rem;
        font-size: 0.32rem;
      }
    }
  }
}
</style>
 
<style lang="less" scoped>
#topicdetailtopic {
  img {
    width: 100%;
  }
}

.topicdetail-navbar {
  .mint-tab-item {
    width: 1rem;
    font-size: 0.36rem;
  }
  .mint-tab-item.is-selected {
    border-bottom: 0.04rem solid #fb685b;
  }
  .mint-tab-item.is-selected {
    margin-bottom: 0;
    color: #fb685b !important;
    font-family: 'PingFangSC Regular';
  }
}

/* 以下是讨论的nav的style*/

.discuss {
  margin-top: 0.2rem;
  margin-bottom: 0.1rem;
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding: 0 0.3rem;
  border-bottom: 1px solid #e6e6e6;
}

.discuss-title {
  display: flex;
  flex: 2;
  color: #494949;
  font-size: 0.3rem;
  line-height: 0.9rem;
}

.discuss-title-num {
  font-family: PingFangSC-Medium, sans-serif;
  color: #fb685b;
}

.discuss-text {
  line-height: 0.88rem;
  font-size: 0.28rem;
  font-family: 'PingFangSC Regular';
}

.mint-navbar .mint-tab-item {
  margin-left: 0.2rem;
  color: #999999;
  font-family: 'PingFangSC Regular';
  flex: 1;
}

/* 以上是讨论的nav的style*/

.topic-detail-bottom {
  height: 1rem;
  color: white;
  font-size: 0.36rem;
  font-family: 'PingFangSC Regular';
}

.big-bottom {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 1rem;
  width: 100%;
  color: white;
  background: linear-gradient(to right, #fd996d, #ff5c5c);
  font-size: 0.36rem;
}

.baoming-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex: 1;
  background: #fb9b6f;
}

.join-bottom {
  text-align: center;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: #fb685b;
  font-size: 0.3rem;
}

.singupover {
  width: 3.1rem;
}

.mt-progress-progress {
  background-color: #34a186 !important;
}

.loadmore-container {
  height: 95vh;
  overflow: hidden;
  margin: 0 auto;
}

.loadmore-ul {
  padding-bottom: 1.2rem;
  list-style: none;
}

.rangicon {
  font-size: 0.36rem;
  padding-right: 0.18rem;
}

.all-hot-title {
  background: #f5f5f5;
  padding: 0.1rem 0 0 0.3rem;
  display: flex;
  align-items: center;
  font-size: 0.3rem;
  font-family: 'PingFangSC Regular';
  color: #3a3a3a;
}

.indextopicWrap {
  overflow: hidden;
}

.indextopicWrap_u {
  overflow-y: auto;
  white-space: nowrap;
  background: #f5f5f5;
}

.indextopicWrap_u li {
  margin-left: 0.2rem;
  display: inline-block;
  width: 4.3rem;
  height: 3.2rem;
  line-height: 3.2rem;
  text-align: center;
}

.indextopicWrap_u li a {
  width: 4.3rem;
  height: 3.2rem;
  font-size: 15px;
  display: inline-block;
  color: #333;
  transition: border 0.5s linear;
  line-height: 3.2rem;
}

.activity_click {
  border-bottom: 1px solid #fb685b;
  color: #fb685b;
}

.activity_rule_fa {
  height: 1rem;
  display: flex;
  align-items: center;
  border-top: 1px dashed #e5e5e5;
  padding: 0 0.52rem;
  background: #fff;
  font-size: 0.28rem;
  color: #3a3a3a;
  padding-bottom: 0.06rem;
}

.topic_discuss_top {
  height: 0.7rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
  padding-left: 0.3rem;
  color: #fb685b;
  font-size: 0.26rem;
}

.top_red {
  margin-left: 0.1rem;
}
</style>
